<template>
  <div>
    <el-steps :active="active" align-center finish-status="success" class="collectbatch-step">
      <el-step title="基本信息"></el-step>
      <el-step title="范围选择"></el-step>
    </el-steps>
    <el-form ref="form" :model="formData" :rules="rules" size="small" label-width="120px" class="collectbatch-form">
      <div v-show="active== 0">
        <el-form-item label="批次名称" prop="batchName">
          <el-input v-model="formData.batchName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="批次编码" prop="batchCode">
          <el-input v-model="formData.batchCode" autocomplete="off"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="计划开始时间" prop="planStartTime">
              <avue-date
                v-model="formData.planStartTime"
                type="datetime"
                format="yyyy-MM-dd hh:mm:ss"
                value-format="yyyy-MM-dd hh:mm:ss"
                placeholder="请选择日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="计划结束时间" prop="planEndTime">
              <avue-date
                v-model="formData.planEndTime"
                type="datetime"
                format="yyyy-MM-dd hh:mm:ss"
                value-format="yyyy-MM-dd hh:mm:ss"
                placeholder="请选择日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="手机号是否必填">
          <avue-switch v-model="formData.phoneRequired" :dic="phoneRequiredDic"></avue-switch>
        </el-form-item>
        <div style="text-align:right;">
          <el-button size="small" type="primary" plain @click="nextStep">下一步</el-button>
        </div>
      </div>
      <div v-show="active == 1">
        <el-card header="已选范围">
          <avue-crud :option="option"
            :table-loading="loading"
            :data="data"
            :page.sync="page"
            :permission="permissionList"
            v-model="form"
            ref="crud"
            @row-del="rowDel"
            @current-change="currentChange"
            @size-change="sizeChange"
            @refresh-change="refreshChange"
            @on-load="onLoad">

            <template slot="menuLeft">
              <el-button
                size="small"
                plain
                @click="addCommunity"
              >
                添加范围
              </el-button>
            </template>
          </avue-crud>
        </el-card>
        <div class="avue-form__menu avue-form__menu--right">
          <el-button
            size="small"
            type="primary"
            icon="el-icon-circle-plus-outline"
            @click="saveVatch"
          >保存</el-button>
          <el-button
            size="small"
            icon="el-icon-circle-close"
            @click="close"
          >取 消</el-button>
        </div>
      </div>
    </el-form>

    <el-dialog
      :visible.sync="visibleForm"
      :fullscreen="fullscreen"
      :close-on-click-modal="false"
      class="avue-dialog"
      width="60%"
      append-to-body
      >
      <div slot="title"
        class="avue-crud__dialog__header">
        <span class="el-dialog__title">添加范围</span>
        <div class="avue-crud__dialog__menu">
          <i @click="handleFullScreen"
            class="el-dialog__close el-icon-full-screen"></i>
        </div>
      </div>

      <avue-crud :option="unSelectTableOption"
        :table-loading="unSelectTableLoading"
        :data="unSelectTableData"
        :page.sync="unSelectTablePage"
        ref="unselectList"
        @search-change="unSelectTableSearchChange"
        @search-reset="unSelectTableSearchReset"
        @current-change="unSelectTableCurrentChange"
        @size-change="unSelectTableSizeChange"
        @refresh-change="unSelectTableRefreshChange"
        @on-load="unSelectTableOnLoad"
        @tree-load="unSelectTableTreeLoad">
      </avue-crud>

      <div class="avue-form__menu avue-form__menu--right">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-circle-plus-outline"
          @click="hideDialog"
        >添加</el-button>
        <el-button
          size="small"
          icon="el-icon-circle-close"
          @click="hideDialog"
        >取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import {getList} from "@/api/collect_community/collectcommunity"
import {getLazyList} from "@/api/system/menu";
export default {
  name: 'CollectbatchForm',
  props: {
    close: {
      type: Function,
      default() {
        return () => {}
      }
    }
  },
  data() {
    return {
      active: 0,
      formData: {
        batchName: '',
        batchCode: '',
        planStartTime: ''
      },
      rules: {
        batchName: [
          { required: true, message: '请输入批次名称', trigger: 'blur' }
        ],
        batchCode: [
          { required: true, message: '请输入批次编码', trigger: 'blur' }
        ],
        planStartTime: [
          { required: true, message: '请输入计划开始时间', trigger: 'blur' }
        ],
        planEndTime: [
          { required: true, message: '请输入计划结束时间', trigger: 'blur' }
        ],
      },
      phoneRequiredDic: [{
        label:'否',
        value:"false"
      },{
        label:"是",
        value:"true"
      }],
      option: {
        tip: false,
        searchShow: false,
        border:true,
        addBtn: false,
        editBtn: false,
        column: [
          {
            label: '区域',
            prop: 'parentId'
          },
          {
            label: '社区',
            prop: 'name'
          },
          {
            label: '预估人数',
            prop: 'alias'
          }
        ]
      },
      loading: true,
      data: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      visibleForm: false,
      fullscreen: false,
      unSelectTableOption: {
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border:true,
        menu: false,
        addBtn: false,
        tree: true,
        // editBtn: false,
        // delBtn: false,
        selection: true,
        column: [
          {
            label: '区域',
            prop: 'parentId',
            search: true
          },
          {
            label: '社区',
            prop: 'name',
            search: true
          },
          {
            label: '预估人数',
            prop: 'alias'
          }
        ]
      },
      unSelectTableLoading: true,
      unSelectTableData: [],
      unSelectTablePage: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      unSelectTableParentId: '',
      unSelectTableQuery: {}
    }
  },
  methods: {
    nextStep() {
      this.$refs.form.validate(pass => {
        this.active = 1;
        if(pass) {
        }
      })
    },
    currentChange(currentPage){
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize){
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, params).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
      });
    },
    addCommunity() {
      this.visibleForm = true
    },
    hideDialog() {
      this.visibleForm = false
    },
    handleFullScreen() {
      if (this.fullscreen) {
        this.fullscreen = false;
      } else {
        this.fullscreen = true;
      }
    },
    unSelectTableSearchChange(params, done) {
      this.unSelectTableQuery = params;
      this.unSelectTableParentId = '';
      this.unSelectTablePage.currentPage = 1;
      this.onLoad(this.unSelectTablePage, params);
      done();
    },
    unSelectTableSearchReset() {
      this.unSelectTableQuery = {};
      this.unSelectTableParentId = 0;
      this.onLoad(this.unSelectTablePage);
    },
    unSelectTableCurrentChange(currentPage){
      this.unSelectTablePage.currentPage = currentPage;
    },
    unSelectTableSizeChange(pageSize){
      this.unSelectTablePage.pageSize = pageSize;
    },
    unSelectTableRefreshChange() {
      this.unSelectTableOnLoad(this.page, this.unSelectTableQuery);
    },
    unSelectTableOnLoad(page, params = {}) {
      this.unSelectTableLoading = true;
      getLazyList(this.unSelectTableParentId, Object.assign(params, this.unSelectTableQuery)).then(res => {
        const data = res.data.data;
        // this.unSelectTablePage.total = data.total;
        this.unSelectTableData = data;
        this.unSelectTableLoading = false;
      });
    },
    unSelectTableTreeLoad(tree, treeNode, resolve) {
      const parentId = tree.id;
      getLazyList(parentId).then(res => {
        resolve(res.data.data);
      });
    },
    saveVatch() {
      this.close();
    },
    reset() {
      this.$refs.form.resetFields();
      this.active = 0
    }
  }
}
</script>
<style lang="scss" scoped>
.collectbatch-step {
  width: 80%;
  margin: 0 auto;
}
.collectbatch-form {
  // width: 80%;
  padding-top: 20px;
}
</style>
